pre {
  overflow-x: auto;
}

.code-highlight {
  float: left;
  min-width: 100%;
}

.code-line {
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
  border-left: 4px solid rgba(0, 0, 0, 0);
}

.code-line.inserted {
  background-color: rgba(16, 185, 129, 0.2);
}

.code-line.deleted {
  background-color: rgba(239, 68, 68, 0.2);
}

.highlight-line {
  margin-left: -16px;
  margin-right: -16px;
  background-color: rgba(55, 65, 81, 0.5);
  border-left: 4px solid rgb(59, 130, 246);
}

.line-number::before {
  display: inline-block;
  width: 1rem;
  text-align: right;
  margin-right: 16px;
  margin-left: -8px;
  color: rgb(156, 163, 175);
  content: attr(line);
}
